import { inject, observer } from 'mobx-react'
import { Component } from 'react'
import '../styles/appleBasket.scss'
import AppleItem from './appleItem'

@inject('apple')
@observer
class AppleBasket extends Component {
  getAppletItem() {
    const { apples, eatApple } = this.props.apple
    let data = []
    apples.forEach((appleItem, index) => {
      if (!appleItem.isEaten) {
        data.push(<AppleItem eatApple={eatApple} appleItem={appleItem} key={index} />)
      }
    })
    return data
  }
  render() {
    const { appleStatus } = this.props.apple
    return (
      <div className='appleBusket'>
        <div className='title'>苹果篮子</div>

        <div className='stats'>
          <div className='section'>
            <div className='head'>当前</div>
            <div className='content'>
              {appleStatus.num}个苹果，{appleStatus.weight}克
            </div>
          </div>
          <div className='section'>
            <div className='head'>已吃掉</div>
            <div className='content'>
              {appleStatus.eatNum}个苹果，{appleStatus.eatWeight}克
            </div>
          </div>
        </div>

        <div className='appleList'>{this.getAppletItem()}</div>

        <div className='btn-div'>
          {/* <button  className={isPicking ? 'disabled' : ''}  onClick={() => pickApple() } >{}</button> */}
        </div>
      </div>
    )
  }
}

export default AppleBasket
